// 工具类

@mixin e-margin-and-padding($mode) {
    @if $mode == general {
        $mode: '';
    } @else {
        $mode: "-" + $mode;
    }

    @for $i from 0 through 10 {
        $num: $i * 5;

        .e-margin-#{$num}#{$mode} {
            margin: #{$num}px !important;
        }

        .e-margin-t-#{$num}#{$mode} {
            margin-top: #{$num}px !important;
        }

        .e-margin-b-#{$num}#{$mode} {
            margin-bottom: #{$num}px !important;
        }

        .e-margin-l-#{$num}#{$mode} {
            margin-left: #{$num}px !important;
        }

        .e-margin-r-#{$num}#{$mode} {
            margin-right: #{$num}px !important;
        }

        .e-padding-#{$num}#{$mode} {
            padding: #{$num}px !important;
        }

        .e-padding-t-#{$num}#{$mode} {
            padding-top: #{$num}px !important;
        }

        .e-padding-b-#{$num}#{$mode} {
            padding-bottom: #{$num}px !important;
        }

        .e-padding-l-#{$num}#{$mode} {
            padding-left: #{$num}px !important;
        }

        .e-padding-r-#{$num}#{$mode} {
            padding-right: #{$num}px !important;
        }
    }
}

@include e-margin-and-padding(general);

@include e-desktop {
    @include e-margin-and-padding(desktop);
}

@include e-tablet {
    @include e-margin-and-padding(tablet);
}

@include e-tablet-and-mobile {
    @include e-margin-and-padding(tablet-and-mobile);
}

@include e-mobile {
    @include e-margin-and-padding(mobile);
}

// Opacity 透明度
@for $i from 1 through 9 {
    .e-opacity-#{$i} {
        opacity: #{$i * .1};
    }
}

// Space
.e-space-sm {
    display: block;
    height: 0;
    margin-bottom: 10px;
}

.e-space {
    display: block;
    height: 0;
    margin-bottom: 20px;
}

.e-space-lg {
    display: block;
    height: 0;
    margin-bottom: 30px;
}

// Font
.e-font-sm {
    font-size: .8rem !important;
}

.e-font-md {
    font-size: .9rem !important;
}

.e-font-lg {
    font-size: 1.2rem !important;
}

.e-font-xl {
    font-size: 1.5rem !important;
}

// Font Weights
.e-font-regular {
    font-weight: 400 !important;
}

.e-font-bold {
    font-weight: 500 !important;
}

.e-font-bolder {
    font-weight: 600 !important;
}

.e-font-boldest {
    font-weight: 700 !important;
}

// Text Transform 大小写
.e-font-transform-u {
    text-transform: uppercase;
}

.e-font-transform-l {
    text-transform: lowercase;
}

.e-font-transform-c {
    text-transform: capitalize;
}

// Icon font sizing
.e-icon-sm {
    font-size: .75rem !important;
}

.e-icon-md {
    font-size: .9rem !important;
}

.e-icon-lg {
    font-size: 1.2rem !important;
}

.e-icon-xl {
    font-size: 1.4rem !important;
}

b, strong {
    font-weight: bold;
}

// State font color
@each $name, $color in $e-state-colors {
    .e-font-#{$name} {
        color: e-get($color, base) !important;
    }

    .e-font-hover-#{$name} {
        &:hover {
            color: darken(e-get($color, base), 20%) !important;
        }
    }

    .e-bg-#{$name} {
        background-color: e-get($color, base) !important;
    }
}

// Base colors
@each $name, $color in e-get($e-base-colors, label) {
    .e-label-font-color-#{$name} {
        color: $color !important;
    }

    .e-label-bg-color-#{$name} {
        background-color: $color !important;
    }
}

@each $name, $color in e-get($e-base-colors, shape) {
    .e-shape-font-color-#{$name} {
        color: $color !important;
    }

    .e-shape-bg-color-#{$name} {
        background-color: $color !important;
    }
}

// Responsive Helpers
.e-visible-desktop,
.e-visible-desktop-inline-block,
.e-visible-desktop-inline,
.e-visible-desktop-table,
.e-visible-desktop-table-cell,
.e-visible-tablet,
.e-visible-tablet-inline-block,
.e-visible-tablet-inline,
.e-visible-tablet-table,
.e-visible-tablet-table-cell,
.e-visible-tablet-and-mobile,
.e-visible-tablet-and-mobile-inline-block,
.e-visible-tablet-and-mobile-inline,
.e-visible-tablet-and-mobile-table,
.e-visible-tablet-and-mobile-table-cell,
.e-visible-mobile,
.e-visible-mobile-inline-block,
.e-visible-mobile-inline,
.e-visible-mobile-table,
.e-visible-mobile-table-cell {
    display: none !important;
}

@include e-desktop {
    .e-visible-desktop {
        display: block !important;
    }

    .e-visible-desktop-inline-block {
        display: inline-block !important;
    }

    .e-visible-desktop-inline {
        display: inline !important;
    }

    .e-visible-desktop-table {
        display: table !important;
    }

    .e-visible-desktop-table-cell {
        display: table-cell !important;
    }

    .e-hidden-desktop {
        display: none !important;
    }
}

@include e-tablet {
    .e-visible-tablet {
        display: block !important;
    }

    .e-visible-tablet-inline-block {
        display: inline-block !important;
    }

    .e-visible-tablet-inline {
        display: inline !important;
    }

    .e-visible-tablet-table {
        display: table !important;
    }

    .e-visible-tablet-table-cell {
        display: table-cell !important;
    }

    .e-hidden-tablet {
        display: none !important;
    }
}

@include e-tablet-and-mobile {
    .e-visible-tablet-and-mobile {
        display: block !important;
    }

    .e-visible-tablet-and-mobile-inline-block {
        display: inline-block !important;
    }

    .e-visible-tablet-and-mobile-inline {
        display: inline !important;
    }

    .e-visible-tablet-and-mobile-table {
        display: table !important;
    }

    .e-visible-tablet-and-mobile-table-cell {
        display: table-cell !important;
    }

    .e-hidden-tablet-and-mobile {
        display: none !important;
    }
}

@include e-mobile {
    .e-visible-mobile {
        display: block !important;
    }

    .e-visible-mobile-inline-block {
        display: inline-block !important;
    }

    .e-visible-mobile-inline {
        display: inline !important;
    }

    .e-visible-mobile-table {
        display: table !important;
    }

    .e-visible-mobile-table-cell {
        display: table-cell !important;
    }

    .e-hidden-mobile {
        display: none !important;
    }
}

// Flexbox helpers

.e-space-between {
    display: flex;
    justify-content: space-between;
}

// Rounded
.e-rounded {
    border-radius: $e-border-radius !important;
}

.e-radius-100 {
    border-radius: 100%;
}

.e-block-center {
    margin-left: auto;
    margin-right: auto;
}

.e-pull-right {
    float: right;
}

.e-pull-left {
    float: left;
}

.e-img-rounded {
    border-radius: 50% !important;
}

.e-block-inline {
    display: inline-block;
}

.e-icon-middle {
    &:before {
        vertical-align: middle;
    }
}

// Element visibility
.e-hidden,
.e-hide {
    display: none !important;
}

.e-ell {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
